<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>遍历</title>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            let i = 1;
            $("#more").click(function () {
                let d = $("#d").clone(true);
                d.attr("id", "d" + i);
                $(this).before(d);

                // 此时克隆出来的div区域与原始区域是完全一致的
                // 因此,当选择了文件之后克隆,会同时将文件克隆过来
                // 我们需要清空文件选择器的内容
                $("#d" + i + " input").val("")
                i++;
            });
            $("a").click(function () {
                // if($(this.parentNode).attr("id") != "d"){
                //     $(this.parentNode).remove();
                // }
                if ($(this).parent().attr("id") != "d") {
                    $(this).parent().remove();
                }
            });
            $("#show").click(function () {
                // 当匹配的文件存在多个时,直接通过val()获取到的是第一个文件的名字
                // console.log($("input[type='file']").val());
                // 此时需要手动进行遍历,通过each方法进行遍历
                // each参数是一个函数,函数存在三种使用场景
                // 1.函数无参,可以通过this表示当前迭代的元素
                // $("input[type='file']").each(function(){
                //     console.log($(this).val());
                // });

                // 2.一个参数,此时参数表示元素的索引号
                // $("input[type='file']").each(function (index) {
                //     console.log("索引号:" + index + ",文件名:" + $(this).val());
                // });

                // 3.两个参数
                // 参数一表示索引号
                // 参数二表示当前迭代的元素,这是一个DOM对象
                $("input[type='file']").each(function (index, ele) {
                    console.log("索引号:" + index + ",文件名:" + $(ele).val());
                });
            });
        })
    </script>
</head>
<body>
<div id="d">
    <input type="file">
    <a href="javascript:;">删除</a>
</div>
<button id="more">上传更多</button>
<button id="show">显示所有文件名</button>
</body>
</html>